<template>
  <view>
  <view class="searchBox">
    <uni-search-bar  v-model="value" maxlength="15" focus="true" @input="input" radius="100" placeholder="请输入要搜索的内容" clearButton="auto" cancelButton="none" />
  </view>
  <view class="searchDetail" v-if="searchList.length">
      <view 
      @click="gotoGoodsDetail(item.goods_id)"
      class="searchDetail-item" 
      hover-class="item-hover"
      v-for="(item, index) in searchList" 
      :key="index">
        <view class="goodsName">{{item.goods_name}}</view>
        <uni-icons color="#FF6600" type="fire-filled" size="16"></uni-icons>
      </view>
    </view>
    <view class="historyBox" v-else>
      <view class="historyItem-top">
        <text>搜索历史</text>
        <uni-icons @click="deleteHistory" type="trash" size="20"></uni-icons>
      </view>
      <view class="historyItem-bottom">
        <uni-tag @click="handleHistory(item)" v-for="(item, index) in history" :key="index" :inverted="true" :text="item" type="warning"/>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        value: '',
        searchList: [],
        searchHistory: []
      };
    },
    onLoad() {
      this.searchHistory = JSON.parse(uni.getStorageSync('searchValue')  || '[]')
    },
    onShow() {
        this.value = ''; // 每次页面显示时清空输入框
        this.searchList = []; // 可选：同时清空搜索结果
    },
    computed: {
      history(){
        return [...this.searchHistory].reverse()
      }
    },
    methods: {
      input(){
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.getSearchList()
        }, 1000)
      },
      async getSearchList(){
        if (this.value.trim() === '') {
          this.searchList = [];
          return;
        }
        const { data: { message } } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.value })
        this.searchList = message
      },
      gotoGoodsDetail(id){
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
        })
        this.saveHistory()
      },
      saveHistory(){
        this.value = this.value.replace(/ /g, ''); // 仅移除空格
        const set = new Set(this.searchHistory)
        set.delete(this.value)
        set.add(this.value)
        this.searchHistory = Array.from(set)
        uni.setStorageSync('searchValue', JSON.stringify(this.searchHistory))
      },
      deleteHistory(){
        this.searchHistory = []
        uni.removeStorageSync('searchValue')
      },
      handleHistory(item){
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?query=' + item
        })
      }
    },
  }
</script>

<style lang="scss">
  .searchBox {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .searchDetail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 2rpx solid #efefef;
    .goodsName {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 24rpx;
    }&.item-hover .goodsName {
      color: #FF6600;
    }
  }
  .historyBox {
    padding: 20rpx;
    .historyItem-top {
      padding-bottom: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #efefef;
      text {
        font-size: 28rpx;
      }
    }
    .historyItem-bottom {
      display: flex;
      flex-wrap: wrap;
      .uni-tag {
        display: block;
        margin: 10rpx 10rpx 0 0;
        color: #000000;
      }
    }
  }
</style>
